import { useEffect } from 'react'
import * as THREE from 'three'
import { debounce } from '@ykob/js-util'
import NodeText from './NodeText'
import BackgroundSphere from './BackgroundSphere'

export default function ThreeScene () {
    useEffect(() => {
        // ==========
        // Define common variables
        //
        const resolution = new THREE.Vector2()
        const canvas = document.getElementById('canvas-webgl')
        const renderer = new THREE.WebGL1Renderer({
            alpha: true,
            antialias: true,
            canvas: canvas,
        })
        const scene = new THREE.Scene()
        const camera = new THREE.PerspectiveCamera()
        const clock = new THREE.Clock()
        const loader = new THREE.FontLoader()

        camera.far = 50000
        camera.setFocalLength(24)

        // ==========
        // Define unique variables
        //
        const nodeText = new NodeText()
        const bg = new BackgroundSphere()

        // ==========
        // Define functions
        //
        const render = () => {
            const time = clock.getDelta()
            nodeText.render(time)
            renderer.render(scene, camera)
        }
        const renderLoop = () => {
            render()
            requestAnimationFrame(renderLoop)
        }
        const resizeCamera = () => {
            camera.aspect = resolution.x / resolution.y
            camera.updateProjectionMatrix()
        }
        const resizeWindow = () => {
            // resolution.set(window.innerWidth, window.innerHeight)
            resolution.set(document.body.clientWidth, window.innerHeight)
            canvas.width = resolution.x
            canvas.height = resolution.y
            resizeCamera()
            renderer.setSize(resolution.x, resolution.y)
        }
        const on = () => {
            window.addEventListener('resize', debounce(resizeWindow, 1000))
            window.addEventListener('click', () => {
                nodeText.transform()
            })
        }

        // ==========
        // Initialize
        //
        const init = () => {
            // loader.load('https://threejs.org/examples/fonts/helvetiker_bold.typeface.json', (font) => {
            loader.load('./three-font.json', (font) => {
                nodeText.createObj(font, 'FROZEN', 'CMS', 'MENTYIN', 'WORRY')
                bg.createObj()

                // scene.add(nodeText.obj)
                scene.add(nodeText.objWire)
                scene.add(nodeText.objPoints)
                scene.add(bg.obj)

                renderer.setClearColor(0x111111, 1.0)
                camera.position.set(0, 0, 1000)
                camera.lookAt(new THREE.Vector3())
                clock.start()

                on()
                resizeWindow()
                renderLoop()
            })
        }
        init()
    }, [])

    return <canvas id='canvas-webgl'></canvas>
}
